<template>
    <div>
        <div class="outmain ba_f heighthv pad_20 bor_rad5">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>创建减免配送费</span>
                </div>
            </div>
            <div class="mar_t20 flex-bet flex-y-top">
                <div class="flex-g-1">
                    <el-form ref="form" :model="form" label-width="180px">
                        <el-form-item label="活动名称">
                            <el-input v-model="form.name" placeholder="请输入活动名称"></el-input>
                        </el-form-item>
                        <el-form-item label="活动时间">
                            <el-date-picker
                                    v-model="timeData"
                                    type="datetimerange"
                                    align="right"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-time="['08:00:00', '20:00:00']">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="优惠形式">
                            <el-radio-group v-model="form.type">
                                <el-radio label="1">立减(无门槛)</el-radio>
                                <el-radio label="2">满减</el-radio>
                            </el-radio-group>
                            <div class="mar_t10 time_item" v-show="form.type=='1'">
                                <el-input-number v-model="form.money" controls-position="right" :min="0" :max="100000000"
                                                 placeholder="立减金额"></el-input-number>
                                <span class="mar_lr10">元</span>
                            </div>
                            <div class="mar_t10" v-show="form.type=='2'">
                                <div class="time_item mar_b20" v-for="(item,index) in fullArr" :key="index">
                                    <span class="mar_r10">订单金额满</span>
                                    <el-input-number v-model="item.fullMoney" controls-position="right" :min="0"
                                                     :max="100000000"
                                                     placeholder="满减金额"></el-input-number>
                                    <span class="mar_lr10">元</span>
<!--                                    <el-checkbox v-model="item.fillType" :true-label="'1'" :false-label="'2'"-->
<!--                                                 class="mar_l20">免配送费-->
<!--                                    </el-checkbox>-->
                                    <el-radio-group v-model="item.isFree" @change="changeRadio" class="mar_l20">
                                        <el-radio label="1">免配送费</el-radio>
                                        <el-radio label="2">配送费减免</el-radio>
                                    </el-radio-group>
                                    <span v-if="item.isFree!='1'" class="mar_l20">
                                          <el-input-number v-model="item.money" controls-position="right" :min="0"
                                                           :max="100000000"
                                                           placeholder="配送费金额"></el-input-number>
                                </span>
                                    <el-button size="small" plain @click="delfullArr(index)"
                                               class="fon_12 mar_l10">删除
                                    </el-button>
                                </div>
                                <el-button v-show="fullArr.length<10" type="text" @click="addfullArr">
                                    <Icon type="md-add"/>
                                    添加满减
                                </el-button>
                            </div>
                        </el-form-item>
<!--                        <el-form-item label="可用门店">-->
<!--                            <el-radio-group v-model="form.useType">-->
<!--                                <el-radio label="1" disabled>仅本店可用</el-radio>-->
<!--                                <el-radio label="2" disabled>全店通用</el-radio>-->
<!--                                <el-radio label="3" disabled>指定门店可用</el-radio>-->
<!--                            </el-radio-group>-->
<!--                        </el-form-item>-->
                        <el-form-item label="循环周期">
                            <el-checkbox-group v-model="form.week">
                                <el-checkbox label="1">周一</el-checkbox>
                                <el-checkbox label="2">周二</el-checkbox>
                                <el-checkbox label="3">周三</el-checkbox>
                                <el-checkbox label="4">周四</el-checkbox>
                                <el-checkbox label="5">周五</el-checkbox>
                                <el-checkbox label="6">周六</el-checkbox>
                                <el-checkbox label="0">周日</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
<!--                        <el-form-item label="循环周期">-->
<!--                            <el-radio-group v-model="form.type">-->
<!--                                <el-radio label="1">全天</el-radio>-->
<!--                            </el-radio-group>-->
<!--                        </el-form-item>-->
                    </el-form>
                </div>
                <div class="flex-g-0 pad_lr_20">
                    <div class="fon_16">常见问题</div>
                    <el-collapse v-model="collapseName" accordion class="mar_tb10" style="width: 260px">
                        <el-collapse-item title="什么是减免配送费？" name="1">
                            <div>在用户支付时，订单金额满足消费门槛后，可享受一定减免配送费优惠。</div>
                        </el-collapse-item>
                        <el-collapse-item title="什么是立减（无门槛）配送费？" name="2">
                            <div>没有消费门槛，直接减免配送费，减免金额不得大于设置的配送费金额。</div>
                        </el-collapse-item>
                    </el-collapse>
                    <div class="fon_16 mar_t20">活动规则</div>
                    <div class="color_9 mar_t10 lh30 fon_13">
                        <div>1.活动仅限在线支付订单；</div>
                        <div>2.活动成本由商家承担，与店铺其他活动默认同享</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="submitForm">立即创建</el-button>
        </div>
    </div>
</template>
<script>
    import {saveDeliver,getsaveDeliver} from "@/api/plug";
    import {changeDate} from "@/utils/index";
    import {mapState} from "vuex";

    export default {
        created() {
            if (this.$route.query.id) {
                this.id = this.$route.query.id
                this.edit()
            }
        },
        computed: {
            ...mapState(['storeId']),
        },
        data() {
            return {
                form: {
                    name: '',
                    money: '',
                    type: '1',
                    week: [],
                    useType: '1',
                },
                timeData: [new Date(),new Date().setMonth(new Date().getMonth() + 3)],
                collapseName: '',
                radioTrue:true,
                fullArr: [
                    {
                        fullMoney:'',
                        money:'',
                        isFree:'2',
                    }
                ],
            }
        },
        methods: {
            addfullArr() {
                let fullObj = {fullMoney: '', money: '',isFree:'2'}
                this.$set(this.fullArr, this.fullArr.length, fullObj)
                // if(this.radioTrue){
                //     let fullObj = {full: '', reduce: ''}
                //     this.$set(this.fullArr, this.fullArr.length, fullObj)
                // }else {
                //     this.$baseMessage('已有免配送费选项不可添加', "error");
                // }

                // if(this.fullArr.length>0){
                //     for (let i = 0; i < this.fullArr.length; i++) {
                //         if(this.fullArr.length>0 && this.fullArr[i].fillType=='1'){
                //             this.$baseMessage('已有免配送费选项不可添加', "error");
                //         }else {
                //             console.log('111')
                //             let fullObj = {full: '', reduce: ''}
                //             this.$set(this.fullArr, this.fullArr.length, fullObj)
                //         }
                //     }
                // }else {
                //     let fullObj = {full: '', reduce: ''}
                //     this.$set(this.fullArr, this.fullArr.length, fullObj)
                // }
            },
            delfullArr(index) {
                this.radioTrue = true
                this.$delete(this.fullArr, index)
            },
            changeRadio(val){
                if(val==1){
                    this.radioTrue = false
                }
                console.log(val)
            },
            async edit(){
                const {data} = await getsaveDeliver({id: this.id,storeId:this.storeId})
                this.form2 = this.form
                this.form = Object.assign(this.form2, data);
                if(data.startTime){
                    this.timeData = [data.startTime,data.endTime]
                }
                if (data.reductionArr) {
                    this.fullArr = data.reductionArr.map((v => ({fullMoney: v.fullMoney, money: v.money,isFree:v.isFree})))
                }
            },
           async submitForm() {
               this.$refs["form"].validate(async (valid) => {
                   if (valid) {
                       this.form.reductionArr = this.fullArr
                       this.form.storeId = this.storeId
                       if(this.timeData){
                           this.form.startTime  = changeDate(this.timeData[0]);
                           this.form.endTime = changeDate(this.timeData[1]);
                       }
                       const {msg} = await saveDeliver(this.form);
                       this.$baseMessage(msg, "success");
                       this.$router.go(-1)
                   } else {
                       return false;
                   }
               });
            },
        }
    }
</script>
<style lang="scss">
    .time_item .el-input {
        width: 180px;
    }
</style>
